<!doctype html>

<html>
<head>
<meta charset=utf-8>
<title>CSS Reference</title>
<link rel=stylesheet type=text/css href=default.css>
</head>

<body>
<div id="header">CSS Reference Guide</div>
<div id="navigation">
  <ul>
    <li><a href="background.html">background</a></li>
    <li><a href="border.html">border</a></li>
    <li><a href="clear.html">clear</a></li>
    <li><a href="color.html">color</a></li>
    <li><a href="display.html">display</a></li>
    <li><a href="float.html">float</a></li>
    <li><a href="font.html">font</a></li>
    <li><a href="height.html">height</a></li>
    <li><a href="letter-spacing.html">letter-spacing</a></li>
    <li><a href="line-height.html">line-height</a></li>
    <li><a href="list-style.html">list-style</a></li>
    <li><a href="margin.html">margin</a></li>
    <li><a href="overflow.html">overflow</a></li>
    <li><a href="padding.html">padding</a></li>
    <li id="selected">text-align</li>
    <li><a href="text-decoration.html">text-decoration</a></li>
    <li><a href="text-indent.html">text-indent</a></li>
    <li><a href="text-transform.html">text-transform</a></li>
    <li><a href="vertical-align.html">vertical-align</a></li>
    <li><a href="width.html">width</a></li>
  </ul>
</div>
<!-- for id=navigation -->

<div id="content">
  <h1>CSS text-align Property</h1>
  <h2>Definition and Usage</h2>
  <p>TThe text-align property specifies the horizontal alignment of text in an element.</p>
  <h3>CSS Syntax</h3>
  <div id="syntax">text-align: left|right|center|justify|initial|inherit;</div>
  <h3>Possible Values</h3>
  <div class="values">
    <ul>
      <li>left	 - Aligns the text to the left</li>
      <li>right - Aligns the text to the right</li>
      <li>center - Centers the text</li>
      <li>justify - Stretches the lines so that each line has equal width (like in newspapers and magazines)</li>
      <li>initial - Sets this property to its default value.</li>
      <li>inherit - Inherits this property from its parent element.</li>
    </ul>
  </div>
  <h3>Code</h3>
  <div id="code">
    <pre>
<code>
div#textalignexample1 {
	width:350px;
    border: thin black dashed;
	color: #CA50F3;
    text-align:right;
    font-size:120%
}

div#textalignexample2 {
	width:350px;
    border: thin black dashed;
    color: orange;
    text-align:left;
    font-size:120%
}
div#textalignexample3 {
	width:350px;
    border: thin black dashed;
    color: fuschia;
    text-align:justify;
    font-size:120%
}
</code>
</pre>
  </div>
  <h3>Example</h3>
  <div id="textalignexample1">This is some text aligned right!</div>
  <div id="textalignexample2">This is some text aligned left!</div>
  <div id="textalignexample3">This is some text that is justified!
  To justify text you need multiple lines! See how the word spacing varies from line to line? This is like a newspaper.</div>
  <div id="textalignexample4">This is some text that is not justified!
  To justify text you need multiple lines! See how the word spacing stays the same from line to line? This is not like a newspaper.</div>

  <h3>Related Properties</h3>
  <div class="values">
    <ul>
      <li>text-decoration</li>
<li>text-indent
</li><li>text-transform</li>
<li>vertical-align</li>

    </ul>
  </div>
</div>
<div id="footer">&copy; HTML Class of 2015</div>
</body>
</html>